<template>
  <div class="image-container">
    <el-card class="box-card">
      <div slot="header">
       素材管理
      </div>
      <div style="padding-bottom: 20px;">
        <!-- 对于数据项：collect: false
                当选中全部时，它的值是false
                当选中收藏时，它的值是true

            对于el-radio组件，可以通过label来设置当前项被中时的值
            :label="false" 表示一个布尔值 false
            label="false"  表示一个普通的字符串 'false'
        -->
        <el-radio-group
        v-model="isCollected"
        size="medium"
        @change="hSwitchCollect"
        >
          <el-radio-button :label="false">全部</el-radio-button>
          <el-radio-button :label="true">收藏</el-radio-button>
        </el-radio-group>
        <el-button
        @click="dialogVisible=true"
        type="success" size="mini" style="float:right"
        >上传图片素材
      <el-dialog
    append-to-body
    title="上传素材" :visible.sync="dialogVisible">
      <!--
      - action：必选参数，上传的地址：http://ttapi.research.itcast.cn/mp/v1_0/user/images
      - headers: 设置上传的请求头部。要携带token
      - name：上传的文件字段名。要与接口中要求保持一致。
      - show-file-list： 是否显示已上传文件列表
      - on-success：文件上传成功时的钩子。`function(response, file, fileList)`
      - before-upload: 上传之前对文件进行检测。
      -->
      <el-upload
        class="avatar-uploader"
        action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
        :headers="headers"
        name="image"
        :show-file-list="false"
        :on-success="hSuccess"
        :before-upload="beforeAvatarUpload">
          <!--
          如果当前有预览地址就说明图片上传成功了。
          给用户展示这张图，用户成功地看到这张图时，关闭整个上传对话框。
          图片的onload事件：
          - 当你设置图片的src时，浏览器会去请求图片的资源，当图片请求回来之后
          会一有一个事件触发出来，这个事件就是load。
        -->
       <el-image v-if="imageUrl" :src="imageUrl" @load="hLoadUploadImage" class="avatar" />

          <!-- 当上传成功之后，imageUrl就会有值，此时做预览 -->
          <!-- 没有上传之前，这里是一个大大的 + -->
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-dialog>
        </el-button>
      </div>
      <!-- 素材列表 -->
      <div class="option" v-show="!isCollected">
      </div>
      <el-row :gutter="5">
        <el-col
          class="img_item"
          :span='4'
          v-for="image in images"
          :key="image.id"
        >
          <el-image
            style="height: 180px;width: 180px"
            fit="cover"
            :src="image.url"
          ></el-image>
          <div class="option">
            <span class="el-icon-star-off"
            :class="{'red':image.is_collected}"
            @click="hToggleCollect(image)"
            ></span>
            <span class="el-icon-delete"
            @click="hDelImage(image)"
            ></span>
          </div>
        </el-col>
      </el-row>
      <!-- /素材列表 -->
    </el-card>
    <!-- 分页组件
        1. total是总条数。
        2. current-change事件。当点击页码时，它会触发并会传入当前的页码。
        3. page-size: 默认10，它会以每页10条进行计算总页数
        -->
      <el-pagination
        :disabled="isLoading"
        background
        layout="prev, pager, next"
        :page-size="10"
        @current-change="hPageChange"
        :total="total_count">
      </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'ImageIndex',
  data () {
    return {
      isCollect: false, // 是否是收藏的图片
      images: [], // 素材列表
      total_count: 0, // 总数量
      page: 1, // 当前获取的是第几页
      radio1: '全部',
      dialogVisible: false, // 是否显示弹出对话框
      isLoading: false,
      isCollected: false,
      headers: {
        Authorization: `Bearer ${localStorage.getItem('tokenStr')}`
      },
      imageUrl: '' // 图片的预览地址,当上传成功会把后端返回的数据层取出
    }
  },
  created () {
    this.loadImages()
  },
  methods: {
    buildParam () {
      const paramObj = {
        collect: this.isCollected,
        page: this.page, // 页码
        per_page: 10 // 一页10条
      }
      return paramObj
    },
    loadImages () { // 加载图片数据
      // 1 调用函数,获取查询函数
      const paramObj = this.buildParam()
      // 2.发请求,取回数据,保存到images中
      this.$axios({
        method: 'get',
        url: '/mp/v1_0/user/images',
        params: paramObj
      }).then(res => {
        this.images = res.data.data.results
        this.total_count = res.data.data.total_count
      }).catch(err => {
        console.log(err)
        this.images = []
        this.total_count = []
        this.$message.error('获取图片列表失败')
      })
    },
    // 具体实现删除
    doDelete (id) {
      this.$axios({
        method: 'DELETE',
        url: '/mp/v1_0/user/images/' + id
      }).then(res => {
        console.log(res)
        // 删除成功
        this.$message.success('删除成功')
        // 方法1:重新请求数据
        this.loadImages()
        // 方法2:本地删除. 这样会使当前页的数据越来越少,体验不好
      }).catch(err => {
        console.log(err)
      })
    },
    // 用户删除图片
    hDelImage (image) {
      // 提示用户是否确定删除
      this.$confirm('你确定要删除吗?').then(() => {
        // 确定要删除
        this.doDelete(image.id)
      }).catch(() => {
        // 用户取消
      })
    },
    // 用户点击了分页
    hPageChange (curPage) {
      console.log('用户点击了', curPage, '页')
      // 1.更新页码 为1
      this.page = curPage
      // 2.重发请求
      this.loadImages()
    },
    // 用户在收藏和全部直接进行切换
    hSwitchCollect () {
      // 当前用户选中的项是: isCollected
      // console.log('当前用户选中的项是', this.isCollected)
      // 重置页码
      this.page = 1
      // 发请求
      this.loadImages()
    },
    hSuccess (res, file) {
      // 上传成功,预览图片
      // imageUrl用来展示上传的图片
      // this.imageUrl = URL.createObiectURL(file.raw)
      this.imageUrl = res.data.url
      // 2.重新获取
      this.loadImages()
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    hLoadUploadImage () {
      console.log('图片加载完成...')
      setTimeout(() => {
        this.imageUrl = ''
        this.dialogVisible = false
      }, 2000)
    },
    // 切换收藏状态
    hToggleCollect (image) {
      // console.log(image)
      // 发请求,去修改数据
      this.$axios({
        method: 'put',
        url: '/mp/v1_0/user/images/' + image.id,
        data: {
          // 对当前的状态取反
          collect: !image.is_collected
        }
      }).then(res => {
        console.log(res)
        // 提示
        this.$message.success('操作成功')
        // 更新视图
        // 方法1: 重求一次数据
        // this.loadImages()
        // 方法2: 只更新本地的数据
        image.is_collected = !image.is_collected
      }).catch(err => {
        console.log(err)
        this.$message.error('操作失败')
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .img_item {
    position: relative;
    box-sizing: border-box;
  }
  .option {
    position: absolute;
    left: 5px;
    width:180px;
    bottom: 5px;
    height: 30px;
    line-height: 30px;
    background: rgba(0, 0, 0, 0.3);
    text-align: center;
    color: #fff;
    span {
      margin: 0 30px;
      cursor: pointer;
    }
  }
.avatar-uploader {
    text-align: center;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar-uploader /deep/ .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.option {
  position: absolute;
  left: 5px;
  width:180px;
  bottom: 5px;
  height: 30px;
  line-height: 30px;
  background: rgba(0, 0, 0, 0.3);
  text-align: center;
  color: #fff;
  span {
    margin: 0 30px;
    cursor: pointer;
  }
}

.red {
   color: red;
}
</style>
